<script setup lang="tsx">
defineOptions({
  name: "INDICATOR_MATRIX_CHART"
});
import { ref, onMounted, computed, reactive, markRaw } from "vue";
import { useRouter } from "vue-router";
import { useRouterStoreHook } from "@/store/modules/router";
import echartsDom from "../components/echartsDom.vue";
import { queryAllIndicatorMatrixV2 } from "@/api/modules/indicator";

const chartOptions = ref(null);
const chartRef = ref(null);
const nodeList = ref([]);
const selectedNode = ref(null);
const initChart = async graph => {
  // chartOptions.value = {
  //   tooltip: {},
  //   legend: [
  //     {
  //       data: graph.categories.map(function (a) {
  //         return a.name;
  //       })
  //     }
  //   ],
  //   series: [
  //     {
  //       name: 'Les Miserables',
  //       type: 'graph',
  //       layout: 'none',
  //       data: graph.nodes,
  //       links: graph.links,
  //       categories: graph.categories,
  //       roam: true,
  //       label: {
  //         show: true,
  //         position: 'right',
  //         formatter: '{b}'
  //       },
  //       labelLayout: {
  //         hideOverlap: true
  //       },
  //       scaleLimit: {
  //         min: 0.4,
  //         max: 2
  //       },
  //       lineStyle: {
  //         color: 'source',
  //         curveness: 0.3
  //       }
  //     }
  //   ]
  // };
  // var nodes = [
  //   {
  //     name: "节点1",
  //     category: 0,
  //     value: 1000,
  //     symbolSize: 100
  //   },
  //   { name: "节点2", category: 0, value: 300, symbolSize: 30 },
  //   { name: "节点3", category: 1, value: 100, symbolSize: 10 },
  //   { name: "节点4", category: 1, value: 300, symbolSize: 30 },
  //   { name: "节点5", category: 1, value: 100, symbolSize: 10 },
  //   { name: "节点6", category: 2, value: 100, symbolSize: 10 },
  //   { name: "节点7", category: 2, value: 100, symbolSize: 10 },
  //   { name: "节点8", category: 2, value: 100, symbolSize: 10 },
  //   { name: "节点9", category: 2, value: 100, symbolSize: 10 },
  //   { name: "节点10", category: 2, value: 100, symbolSize: 10 },
  //   { name: "节点11", category: 2, value: 100, symbolSize: 10 },
  //   { name: "节点12", category: 2, value: 100, symbolSize: 10 }
  // ];
  let nodes = [];
  graph.nodeDtos.forEach(v => {
    let symbolSize = 20;
    if (v.level == "className") {
      symbolSize = 80;
    }
    if (v.level == "systemModel") {
      symbolSize = 64;
    }
    if (v.level == "measure") {
      symbolSize = 32;
    }
    if (v.level == "custom") {
      symbolSize = 24;
    }
    nodes.push({
      ...v,
      name: v.indicatorName,
      symbolSize,
      isCenter: false
    });
  });
  graph.nodeDtos.forEach(function (node) {
    node.label = {
      show: node.value > 30
    };
  });
  let links = [];
  graph.linkDtos.forEach(function (link) {
    links.push({
      source: link.source - 1,
      target: link.target - 1
    });
  });
  chartOptions.value = {
    // title: {
    //   text: "指标影响矩阵关系图",
    //   left: 'center', // 水平居中
    //   top: 0,
    // },
    grid: {
      top: "10%", // 图表顶部边距
      left: "10%", // 图表左侧边距
      right: "20%", // 图表右侧边距
      bottom: "10%", // 图表底部边距
      containLabel: true // 确保坐标轴标签在 grid 内
    },
    tooltip: {},
    legend: [
      {
        right: 10,
        top: 0,
        // selectedMode: 'single',
        data: graph.graphDtos.map(function (a) {
          return a.name;
        })
      }
    ],
    series: [
      {
        type: "graph",
        layout: "force", // 使用力导向布局
        data: nodes,
        links: links,
        categories: graph.graphDtos,
        roam: true,
        label: {
          show: true
          // position: function (data) {
          //   // 根据节点的大小动态调整标签的位置
          //   // 这里简单地示例为向下偏移，根据需要可以更复杂地计算位置
          //   return data.symbolSize < 60 ? 'bottom' : 'inside'; // 向下偏移，并考虑节点大小
          // },
          // normal: {

          // formatter: function (params) {
          //   // 根据节点大小动态调整字体大小
          //   var size = params.data.symbolSize;
          //   var fontSize = size > 60 ? 14 : 12;
          //   return params.data.name;
          // },
          // textStyle: {
          //   fontSize: function (params) {
          //     var size = params.data.symbolSize;
          //     var fontSize = size > 60 ? '14px' : '12px';
          //     return fontSize;
          //   }
          // },
          // }
        },
        legendHoverLink: false,
        force: {
          // 力导向布局的配置项，可以调整以改变布局效果
          repulsion: 500, // 节点之间的斥力
          edgeLength: [50, 100], // 边的长度范围
          layoutAnimation: false
        },
        edgeSymbol: ["circle", "arrow"], // 线的箭头
        edgeSymbolSize: [4, 6], // 箭头大小
        // label: {
        //   position: "right",
        //   formatter: "{b}"
        // },
        scaleLimit: {
          min: 0.6,
          max: 3
        },
        lineStyle: {
          color: "source",
          curveness: 0.3
        },
        emphasis: {
          focus: "adjacency",
          lineStyle: {
            width: 10
          }
        }
      }
    ]
  };
};
onMounted(() => {
  queryAllIndicatorMatrixV2({ classType: 0 }).then(res => {
    let nodes = res.nodeDtos.filter(v => v.category >= 0);
    nodeList.value = nodes.map(item => ({ value: item.id, label: item.indicatorName }));
    initChart(res);
    // 默认第一个节点
    setTimeout(() => {
      selectedNode.value = nodeList.value[0].value;
      selectNodeHandle();
    }, 1000);
  });
});
const selectNodeHandle = () => {
  chartOptions.value.series[0].data.map(v => {
    if (v.id == selectedNode.value) {
      v.isCenter = true;
    } else {
      v.isCenter = false;
    }
  });
  chartOptions.value = { ...chartOptions.value };
};
const checkOverflow = (event, item) => {
  const element = event.target;
  item.isOverflow = element.scrollWidth > element.clientWidth;
};
</script>

<template>
  <div class="chart-container">
    <div class="search-wrapper">
      <px-select-v2 v-model="selectedNode" :options="nodeList" clearable filterable placeholder="请选择指标" @change="selectNodeHandle">
        <template #default="{ item }">
          <px-tooltip :content="item.label" placement="top" :disabled="!item.isOverflow">
            <div class="truncate" @mouseover="checkOverflow($event, item)" @mouseleave="item.isOverflow = false">
              {{ item.label }}
            </div>
          </px-tooltip>
        </template>
      </px-select-v2>
    </div>
    <echartsDom ref="chartRef" :options="chartOptions" />
  </div>
</template>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  // height: 100%;
  background: #fff;
  // .chart{
  //   width:100%;
  //   position: relative;
  //   height: 100%;
  //   >div{
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
  .search-wrapper {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 50;
  }
}
</style>
